<template>
  <div id="toast" v-show="isShow">
    <div >{{message}}</div>
  </div>
</template>

<script>
  export default {
    name: "Toast",
  /*  props:{
      message:{
        type:String,
        default:''
      },
      isShow:{
        type: Boolean,
        default: false
      }
    },*/
    data(){
      return{
        message:'',
        isShow:false
      }
    },
    methods:{
      showToast(message,duration){
        this.message = message
        this.isShow = true
        setTimeout(()=>{
          this.message = ''
          this.isShow = false
        },duration)
      }
    }

  }
</script>

<style scoped>
#toast{
    position: fixed;
    /*这种居中固定用法★★★★*/
    top: 50%;
    left: 50%;
    /*根据自己的高度宽度偏移*/
    transform: translate(-50%,-50%);
    padding:8px 10px;
    color: white;
    background: rgba(0,0,0,.8);
    z-index: 9999;
}
</style>
